Home Explore Help
Register Sign In
jamesperet
/
codex
Watch 1
Star 0
Fork 0

Browse Source
Syntax Highlight and fixes

James Peret 8 years ago
parent
5309d362a5
commit
4b40703f5b
11 changed files with 317 additions and 12 deletions
Show Diff Stats
  1. 1 1
      app.js
  2. BIN
      app/content/imgs/file-icon.png
  3. 2 1
      app/index.html
  4. 28 4
      app/scripts/controllers/app-ctrl.js
  5. 2 2
      app/scripts/controllers/note-view-ctrl.js
  6. 62 1
      app/scripts/services/file-service.js
  7. 15 1
      app/views/index.html
  8. 113 0
      codex/dev/codex-app/highlightjs.md
  9. 29 1
      codex/inbox/test_note.md
  10. 2 1
      codex/index.md
  11. 63 0
      css/codex.css

+ 1 - 1
app.js
View File 

@@ -19,7 +19,7 @@ app.on('window-all-closed', function() {
19 19 
 app.on('ready', function() {
20 20 
   // Create the browser window.
21 21 
   mainWindow = new BrowserWindow({
22 
-    width: 1000,
22 
+    width: 1030,
23 23 
     height: 700,
24 24 
     'min-width': 500,
25 25 
     'min-height': 200,

BIN
app/content/imgs/file-icon.png
View File


+ 2 - 1
app/index.html
View File 

@@ -5,9 +5,10 @@
5 5 
     <title>Codex</title>
6 6 
     <meta charset="UTF-8">
7 7 
     <!-- Stylesheets -->
8 
+    <link rel="stylesheet" href="../css/tomorrow-night-eighties.css">
8 9 
     <link rel="stylesheet" href="../css/photon.min.css">
9 10 
     <link rel="stylesheet" href="../css/codex.css">
10 
-    <link rel="stylesheet" href="../css/tomorrow-night-eighties.css">
11 
+
11 12
12 13 
     <!-- Javascript -->
13 14 
     <script src="../bower_components/jquery/dist/jquery.js"></script>

+ 28 - 4
app/scripts/controllers/app-ctrl.js
View File 

@@ -59,10 +59,6 @@ angular.module('codexApp.index', [])
59 59 
       return false;
60 60 
     };
61 61
62 
-
63 
-
64 
-
65 
-
66 62 
     $scope.openNote = function(note){
67 63 
       //console.log($location.path());
68 64 
       console.log("openning note " + note.title + " (" + note.id + ")");
 
@@ -73,6 +69,16 @@ angular.module('codexApp.index', [])
73 69 
       //console.log($location.path());
74 70 
     }
75 71
72 
+    $rootScope.$on('file-service:files-loaded', function(){
73 
+      if(!$scope.$$phase) {
74 
+          $scope.$apply(function(){
75 
+            //$scope.itemSpacing();
76 
+          });
77 
+        } else {
78 
+            //$scope.itemSpacing();
79 
+        }
80 
+    })
81 
+
76 82 
     $rootScope.$on('$stateNotFound', function(event, unfoundState, fromState, fromParams){
77 83 
         console.log(unfoundState.to); // "lazy.state"
78 84 
         console.log(unfoundState.toParams); // {a:1, b:2}
 
@@ -88,4 +94,22 @@ angular.module('codexApp.index', [])
88 94 
       console.log(fromParams)
89 95 
     })
90 96
97 
+    $scope.itemSpacing = function(){
98 
+      var items = document.getElementsByClassName("file-view-item");
99 
+      for (var i = 0; i < items.length; i++) {
100 
+        items[i].style.margin = "15px";
101 
+      }
102 
+    }
103 
+
104 
+    $scope.isImage = function(file_type) {
105 
+      if(file_type != 'Image') { return true; }
106 
+      else { return false; }
107 
+    }
108 
+
109 
+    $scope.getImageURL = function(img_url) {
110 
+      return "../codex/" + FileService.absoluteToRelativeURL(FileService.getNotesDir(), img_url)
111 
+    }
112 
+
113 
+
114 
+
91 115 
   }]);

+ 2 - 2
app/scripts/controllers/note-view-ctrl.js
View File 

@@ -16,9 +16,9 @@ angular.module('codexApp.noteView', [])
16 16 
       renderer: new marked.Renderer(),
17 17 
       gfm: true,
18 18 
       tables: true,
19 
-      breaks: false,
19 
+      breaks: true,
20 20 
       pedantic: true,
21 
-      sanitize: true,
21 
+      sanitize: false,
22 22 
       smartLists: true,
23 23 
       smartypants: true
24 24 
     });

+ 62 - 1
app/scripts/services/file-service.js
View File 

@@ -75,8 +75,13 @@ angular.module('codexApp')
75 75 
   var SetFileInfo = function(jsonData, dir, file_path, stat) {
76 76 
     //console.log(jsonData.title);
77 77 
     if (typeof(jsonData)==='undefined') jsonData = {};
78 
+    if(jsonData.title != "" && jsonData.title != undefined){
79 
+      var title = jsonData.title;
80 
+    } else {
81 
+      var title = getNameFromPath(file_path);
82 
+    }
78 83 
     var file_obj = {
79 
-      title: jsonData.title,
84 
+      title: title,
80 85 
       path: file_path,
81 86 
       size: prettySize(directorySize(dir)),
82 87 
       type: getFileType(file_path),
 
@@ -134,6 +139,7 @@ angular.module('codexApp')
134 139
135 140 
         //console.log(file_obj);
136 141 
     });
142 
+    $rootScope.$broadcast('file-service:files-loaded');
137 143 
     return results;
138 144 
   };
139 145 
 
@@ -192,6 +198,61 @@ angular.module('codexApp')
192 198 
     return file_obj
193 199 
   }
194 200
201 
+  var getNameFromPath = function(path) {
202 
+    path = path.split('/');
203 
+    var filename = path[path.length - 1];
204 
+    //filename = filename.split('.');
205 
+    //filename.pop();
206 
+    //name = filename[filename.length -1];
207 
+    return filename
208 
+  }
209 
+
210 
+  var getUrlParts = function(url) {
211 
+      var a = document.createElement('a');
212 
+      a.href = url;
213 
+
214 
+      return {
215 
+          href: a.href,
216 
+          host: a.host,
217 
+          hostname: a.hostname,
218 
+          port: a.port,
219 
+          pathname: a.pathname,
220 
+          protocol: a.protocol,
221 
+          hash: a.hash,
222 
+          search: a.search
223 
+      };
224 
+  }
225 
+
226 
+  // Absolute to relative URL
227 
+  this.absoluteToRelativeURL = function(current_url, absolute_url) {
228 
+    // split urls and create arrays
229 
+    var current_path = current_url.split('/');
230 
+    var absolute_path = getUrlParts(absolute_url).pathname.split('/');
231 
+    // remove the current note's filename from the url and the image filename from the url
232 
+    //current_path.pop();
233 
+    current_path.shift();
234 
+    //absolute_path.shift();
235 
+    // count how many folders the current path has
236 
+    var current_path_count = 0;
237 
+    for (var i = 0; i < current_path.length; i++) {
238 
+      current_path_count = current_path_count + 1;
239 
+    }
240 
+    // count how many folders the absolute path has
241 
+    var absolute_path_count = 0;
242 
+    for (var i = 0; i < absolute_path.length; i++) {
243 
+      absolute_path_count = absolute_path_count + 1;
244 
+    }
245 
+    absolute_path_count = absolute_path_count - 3;
246 
+    //dif = current_path_count - (absolute_path_count -1);
247 
+    for (var i = 0; i < absolute_path_count; i++) {
248 
+      absolute_path.shift();
249 
+    }
250 
+    // make the relative path a string again
251 
+    var relative_path = absolute_path.join('/');
252 
+    console.log("* Converted relative URL: " + relative_path)
253 
+    return relative_path;
254 
+  }
255 
+
195 256
196 257 
   // RESPONSE
197 258 
   this.getNotes = function() {

+ 15 - 1
app/views/index.html
View File 

@@ -1,4 +1,4 @@
1 
-<table class="table-striped">
1 
+<table class="table-striped" ng-show="false">
2 2 
   <thead>
3 3 
     <tr>
4 4 
       <th>Name</th>
 
@@ -18,3 +18,17 @@
18 18 
     </tr>
19 19 
   </tbody>
20 20 
 </table>
21 
+
22 
+<div class="file-view">
23 
+  <ul>
24 
+    <li ng-repeat="file in files track by $index" ng-dblclick="openNote(file)" class="file-view-item">
25 
+      <div class="thumbnail" ng-hide="isImage(file.type)">
26 
+        <img src="{{getImageURL(file.path)}}">
27 
+      </div>
28 
+      <div class="icon">
29 
+        <img src="content/imgs/file-icon.png" ng-show="isImage(file.type)">
30 
+      </div>
31 
+      <div>{{file.title}}</div>
32 
+    </li>
33 
+  </ul>
34 
+</div>

+ 113 - 0
codex/dev/codex-app/highlightjs.md
View File 

@@ -0,0 +1,113 @@
1 
+# How to use highlight.js
2 
+
3 
+## Getting Started
4 
+
5 
+The bare minimum for using highlight.js on a web page is linking to the library along with one of the styles and calling initHighlightingOnLoad:
6 
+
7 
+```
8 
+<link rel="stylesheet" href="/path/to/styles/default.css">
9 
+<script src="/path/to/highlight.pack.js"></script>
10 
+<script>hljs.initHighlightingOnLoad();</script>
11 
+```
12 
+
13 
+This will find and highlight code inside of ```<pre><code>``` tags; it tries to detect the language automatically. If automatic detection doesn't work for you, you can specify the language in the class attribute:
14 
+
15 
+```
16 
+<pre><code class="html">...</code></pre>
17 
+```
18 
+
19 
+The list of supported language classes is available in the class reference. Classes can also be prefixed with either language- or lang-.
20 
+
21 
+To disable highlighting altogether use the nohighlight class:
22 
+
23 
+```
24 
+<pre><code class="nohighlight">...</code></pre>
25 
+```
26 
+
27 
+### Custom Initialization
28 
+
29 
+When you need a bit more control over the initialization of highlight.js, you can use the highlightBlock and configure functions. This allows you to control what to highlight and when.
30 
+
31 
+Here's an equivalent way to calling initHighlightingOnLoad using jQuery:
32 
+
33 
+```
34 
+$(document).ready(function() {
35 
+  $('pre code').each(function(i, block) {
36 
+    hljs.highlightBlock(block);
37 
+  });
38 
+});
39 
+```
40 
+
41 
+You can use any tags instead of <pre><code> to mark up your code. If you don't use a container that preserve line breaks you will need to configure highlight.js to use the <br> tag:
42 
+
43 
+```
44 
+hljs.configure({useBR: true});
45 
+
46 
+$('div.code').each(function(i, block) {
47 
+  hljs.highlightBlock(block);
48 
+});
49 
+```
50 
+
51 
+For other options refer to the documentation for configure.
52 
+
53 
+## Getting the Library
54 
+
55 
+You can get highlight.js as a hosted, or custom-build, browser script or as a server module. Right out of the box the browser script supports both AMD and CommonJS, so if you wish you can use RequireJS or Browserify without having to build from source. The server module also works perfectly fine with Browserify, but there is the option to use a build specific to browsers rather than something meant for a server. Head over to the download page for all the options.
56 
+
57 
+Note: the library is not supposed to work straight from the source on GitHub; it requires building. If none of the pre-packaged options work for you refer to the building documentation.
58 
+
59 
+#### Hosted
60 
+
61 
+A prebuilt version of highlight.js with 22 commonly used languages is hosted by following CDNs:
62 
+
63 
+##### cdnjs
64 
+
65 
+```
66 
+<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/default.min.css">
67 
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
68 
+```
69 
+
70 
+##### jsdelivr
71 
+
72 
+```
73 
+<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.9.1/styles/default.min.css">
74 
+<script src="//cdn.jsdelivr.net/highlight.js/8.9.1/highlight.min.js"></script>
75 
+```
76 
+
77 
+You can find the list of commonly used languages below in the custom download form.
78 
+
79 
+For other available styles look into the highlight.js styles directory (and don't forget to add ".min" before ".css").
80 
+
81 
+#### Custom package
82 
+
83 
+You can download a custom bundle including only the languages you need [here](https://highlightjs.org/download/).
84 
+
85 
+#### Node.js
86 
+
87 
+Highlight.js can be used on the server through the API. The package with all supported languages is installable from NPM:
88 
+
89 
+```
90 
+npm install highlight.js
91 
+```
92 
+
93 
+Alternatively, you can build it from the source:
94 
+
95 
+```
96 
+node tools/build.js -t node
97 
+```
98 
+
99 
+#### Source
100 
+
101 
+Current source is available on GitHub
102 
+
103 
+## License
104 
+
105 
+Highlight.js is released under the BSD License. See LICENSE file for details.
106 
+
107 
+## Links
108 
+
109 
+The official site for the library is at [https://highlightjs.org/](https://highlightjs.org/).
110 
+
111 
+Further in-depth documentation for the API and other topics is at [http://highlightjs.readthedocs.org/](http://highlightjs.readthedocs.org/).
112 
+
113 
+Authors and contributors are listed in the AUTHORS.en.txt file.

+ 29 - 1
codex/inbox/test_note.md
View File 

@@ -4,6 +4,12 @@ This is a quick review of the markdown syntax.
4 4
5 5 
 ## Titles
6 6
7 
+# h1
8 
+## h2
9 
+### h3
10 
+#### h4
11 
+##### h5
12 
+
7 13 
 ``` markdown
8 14 
 # H1
9 15 
 ## H2
 
@@ -14,12 +20,34 @@ This is a quick review of the markdown syntax.
14 20
15 21 
 ## Lists
16 22
23 
+#### Unordered List
24 
+
25 
+* Unordered list item 1
26 
+* Unordered list item 2
27 
+* Unordered list item 3
28 
+
17 29 
 ``` markdown
18 30 
 * Unordered list item 1
19 31 
 * Unordered list item 2
20 32 
 * Unordered list item 3
21 
-
33 
+```
34 
+
35 
+#### Ordered List
36 
+
22 37 
 1. Ordered list item
23 38 
 2. Ordered list item
24 39 
 3. Ordered list item
40 
+
41 
+``` markdown
42 
+1. Ordered list item
43 
+2. Ordered list item
44 
+3. Ordered list item
45 
+```
46 
+
47 
+## Code
48 
+
49 
+This is a ```inline``` code block.
50 
+
51 
+```
52 
+This is a code block
25 53 
 ```

+ 2 - 1
codex/index.md
View File 

@@ -11,4 +11,5 @@
11 11 
 ## Codex Dev
12 12
13 13 
 * [Todo's](dev/codex-app/todos.md)
14 
-* [Notes](dev/codex-app/notes.md)
14 
+* [Notes](dev/codex-app/notes.md)
15 
+* [Highlight JS](dev/codex-app/highlightjs.md)

+ 63 - 0
css/codex.css
View File 

@@ -71,3 +71,66 @@
71 71 
 code {
72 72 
   border-radius: 6px;
73 73 
 }
74 
+
75 
+
76 
+/* File View */
77 
+
78 
+.file-view ul li .thumbnail {
79 
+  width: 220px;
80 
+  border: 1px solid #999;
81 
+  border-radius: 3px;
82 
+  background-color: white;
83 
+  height: 170px;
84 
+  margin-bottom: 5px;
85 
+  overflow: hidden;
86 
+}
87 
+
88 
+.file-view ul li .thumbnail img {
89 
+  width: 100%;
90 
+  height: auto;
91 
+}
92 
+
93 
+.file-view ul li .icon img {
94 
+  height: 140px;
95 
+  padding-top: 10px;
96 
+}
97 
+
98 
+.file-view ul li {
99 
+  list-style: none;
100 
+  padding: 10px;
101 
+  margin: 10px;
102 
+  width: 220px;
103 
+  float: left;
104 
+  text-align: center;
105 
+  height: 220px;
106 
+  padding-bottom: 5px;
107 
+  margin-bottom: 0px;
108 
+}
109 
+
110 
+
111 
+
112 
+pre code.hljs {
113 
+    display: block;
114 
+    line-height: 2em;
115 
+    border-radius: 5px;
116 
+    padding-left: 8px;
117 
+    padding-right: 8px;
118 
+}
119 
+code.hljs {
120 
+    display: inline-flex;
121 
+    padding: 2px;
122 
+    padding-left: 5px;
123 
+    padding-right: 5px;
124 
+    line-height: 1.1em;
125 
+    border-radius: 4px;
126 
+    margin-left: 1px;
127 
+    margin-right: 1px;
128 
+}
129 
+
130 
+pre code.hljs .hljs-title {
131 
+  margin-right: 0px;
132 
+}
133 
+
134 
+code.hljs .hljs-title {
135 
+  margin-right: 6px;
136 
+}